<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">贷款列表管理</ui:define>
    <ui:define name="content">
        <h:form>



            <p:dialog id="batchEliminateProductDialog"
                      header="批量剔除产品" position="center" widgetVar="batchEliminateProductDialogWidgetVar" modal="true" width="30%"
                      height="80%" responsive="true" footer="">
                <p:panelGrid columns="2"
                             columnClasses="ui-grid-col-3,ui-grid-col-9"
                             layout="grid" styleClass="ui-panelgrid-blank"
                             style="border:0px none; background-color:transparent;">

                    <p:outputLabel for="excludePrdId" value="剔除产品"/>
                    <p:selectCheckboxMenu label="-请选择-" id="excludePrdId" value="#{loanAdvertBean.excludeProductIds}"
                                          updateLabel="true" multiple="true" filter="true">
                        <f:selectItems
                                value="#{loanAdvertBean.getCommProductIds()}"
                                var="product"
                                itemLabel="#{product.name}" itemValue="#{product.productId}"/>
                    </p:selectCheckboxMenu>


                </p:panelGrid>
                <div style="text-align:right;padding-top:20px">
                    <p:commandButton value="确定修改" actionListener="#{loanAdvertBean.onBatchEliminateProduct()}"
                                     process="batchEliminateProductDialog" update="@form" />
                </div>
            </p:dialog>



            <p:defaultCommand target="search"/>
            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar>
                    <f:facet name="left">
                        <p:commandButton value="批量模式"
                                         icon="fa fa-list-ul"
                                         actionListener="#{loanAdvertBean.changeModeToBatch}"
                                         update="@form"
                                         process="@this"
                                         rendered="#{loanAdvertBean.isNotBatch()}"/>

                        <p:commandButton value="常规模式" icon="fa fa-file"
                                         actionListener="#{loanAdvertBean.changeModeToNormal}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{loanAdvertBean.isBatch()}"/>

                        <p:commandButton id="toggler" type="button" value="展示选择"
                                         style="width: auto;"
                                         icon="ui-icon-calculator"/>

                        <p:columnToggler datasource="loanadvertDataTable" trigger="toggler"/>
                    </f:facet>
                    <f:facet name="right">
                        <p:commandButton id="search" value="查询" icon="fa fa-search"
                                         update="@form"/>

                        <p:commandButton value="重置" icon="fa fa-refresh"
                                         actionListener="#{loanAdvertBean.onReset()}"
                                         rendered="#{loanAdvertBean.isNormal()}"
                                         process="@this"
                                         update="@form"/>

                        <p:commandButton icon="fa fa-plus" value="新增"
                                         action="#{loanAdvertBean.onAdd}"
                                         rendered="#{loanAdvertBean.isNormal()}">
                            <f:setPropertyActionListener value="/views/family/manage/loan-advert.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>

                        <p:commandButton value="导出" icon="fa fa-download"
                                         rendered="#{loanAdvertBean.isBatch()}"
                                         ajax="false">
                            <p:dataExporter type="xls" target="loanadvertDataTable" fileName="export"/>
                        </p:commandButton>


                        <p:commandButton value="批量剔除产品" icon="fa fa-edit"
                                         rendered="#{loanAdvertBean.isBatch()}"
                                         oncomplete="PF('batchEliminateProductDialogWidgetVar').show()">
                        </p:commandButton>


                    </f:facet>
                </p:toolbar>
            </div>
            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                            <div class="ui-g-12"><h3><b>查询条件</b></h3></div>
                            <div class="ui-g-1">
                                <p:outputLabel for="platform" value="平台"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="platform" value="#{loanAdvertBean.$.platform}">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItem itemLabel="通用" itemValue="0"/>
                                    <f:selectItem itemLabel="安卓" itemValue="1"/>
                                    <f:selectItem itemLabel="ios" itemValue="2"/>
                                </p:selectOneMenu>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel for="productId" value="产品"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="productId" value="#{loanAdvertBean.$.productId}"
                                                 filter="true" updateLabel="true" filterMatchMode="contains">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{loanAdvertBean.commProductIds}"
                                            var="product"
                                            itemLabel="#{product.name}" itemValue="#{product.productId}"/>
                                </p:selectOneMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel for="channelId" value="渠道"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="channelId" value="#{loanAdvertBean.$.channel}"
                                                 filter="true" updateLabel="true" filterMatchMode="contains">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems value="#{loanAdvertBean.commProductChannels}" var="channel"
                                                   itemValue="#{channel.channelCode}" itemLabel="#{channel.channelName}"/>
                                </p:selectOneMenu>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel for="tag" value="标签"/>
                            </div>
                            <div class="ui-g-5">
                                <p:inputText id="tag" value="#{loanAdvertBean.$.tag}"/>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel for="status" value="状态"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="status" value="#{loanAdvertBean.$.status}">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItem itemLabel="上线中" itemValue="1"/>
                                    <f:selectItem itemLabel="已下线" itemValue="0"/>
                                </p:selectOneMenu>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel for="advertSpace" value="广告位"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="advertSpace" value="#{loanAdvertBean.$.advertSpace}"
                                                 filter="true" updateLabel="true"
                                                 filterMatchMode="contains">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{loanAdvertBean.commSysCodes}"
                                            var="commsyscode"
                                            itemLabel="#{commsyscode.kindname}--#{commsyscode.code}" itemValue="#{commsyscode.code}"/>
                                </p:selectOneMenu>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel for="activityName" value="活动名称"/>
                            </div>
                            <div class="ui-g-5">
                                <p:inputText id="activityName" value="#{loanAdvertBean.$.activityName}"/>
                            </div>
                            <div class="card ui-g-12">
                                <p:growl id="msgs" showDetail="true"/>
                                <p:dataTable id="loanadvertDataTable"
                                             style="width: 135%;text-align: match-parent"
                                             var="loanAdvert"
                                             value="#{loanAdvertBean.lazyDataModel}"
                                             rows="#{constants:get('ROWS')}"
                                             lazy="true"
                                             paginator="true"
                                             paginatorTemplate="#{constants:get('PAGINATOR_TEMPLATE')}"
                                             rowsPerPageTemplate="#{constants:get('ROWS_PER_PAGE_TEMPLATE')}"
                                             emptyMessage="#{constants:get('EMPTY_MESSAGE')}"
                                             scrollable="true"
                                             scrollWidth="97%"
                                             editable="true"
                                             editMode="cell"
                                             widgetVar="cellCars"
                                             reflow="true"
                                             resizableColumns="true"
                                             selection="#{loanAdvertBean.selectedRecords}">
                                    <p:ajax event="cellEdit" listener="#{loanAdvertBean.onCellEdit}" update="loanadvertDataTable"/>
                                    <p:column headerText="操作" rendered="#{loanAdvertBean.isNotBatch()}">
                                        <p:splitButton icon="fa fa-eye"
                                                       action="#{loanAdvertBean.onEdit(loanAdvert.id)}"
                                                       process="@this">
                                            <f:setPropertyActionListener
                                                    value="/views/family/manage/loan-advert.xhtml"
                                                    target="#{currentUserBean.back}"/>

                                            <p:menuitem value="上线" icon="fa fa-play"
                                                        action="#{loanAdvertBean.changeStatus(loanAdvert.id)}"
                                                        process="@this" update="@form" rendered="#{loanAdvert.showOnlineButton()}"/>

                                            <p:menuitem value="下线" icon="fa fa-play"
                                                        action="#{loanAdvertBean.changeStatus(loanAdvert.id)}"
                                                        process="@this" update="@form"
                                                        rendered="#{loanAdvert.showOfflineButton()}"/>

                                            <p:menuitem value="删除" icon="fa fa-remove"
                                                        actionListener="#{loanAdvertBean.onDelete(loanAdvert.id)}"
                                                        process="@this" update="@form">
                                                <p:confirm header="提示信息" message="是否确定删除?" icon="ui-icon-alert"/>
                                            </p:menuitem>

                                        </p:splitButton>
                                    </p:column>

                                    <p:column headerText="ID" style="width:70px;">
                                        <h:outputText value="#{loanAdvert.id}"/>
                                    </p:column>

                                    <p:column selectionMode="multiple" style="width:16px;text-align:center"
                                              rendered="#{loanAdvertBean.isBatch()}"/>
                                    <p:column headerText="渠道">
                                        <h:outputText value="#{loanAdvert.channel}"/>
                                    </p:column>

                                    <p:column headerText="顺序" style="text-align: center;">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{loanAdvert.position}"/></f:facet>
                                            <f:facet name="input"><p:inputNumber value="#{loanAdvert.position}" style="width:100%" label="顺序" decimalPlaces="0"/></f:facet>
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="活动ID" style="width:70px;">
                                        <h:outputText value="#{loanAdvert.activityId}"/>
                                    </p:column>

                                    <p:column headerText="活动名称">
                                        <h:outputText value="#{loanAdvert.activityName}"/>
                                    </p:column>

                                    <p:column headerText="广告位">
                                        <h:outputText value="#{loanAdvert.advertSpace}"/>
                                    </p:column>

                                    <p:column headerText="包含标签">
                                        <h:outputText value="#{loanAdvert.tag}"/>
                                    </p:column>

                                    <p:column headerText="操作人">
                                        <h:outputText value="#{loanAdvert.operator}"/>
                                    </p:column>

                                    <p:column headerText="上线时间">
                                        <h:outputText value="#{loanAdvert.startTime}"/>
                                    </p:column>

                                    <p:column headerText="下线时间">
                                        <h:outputText value="#{loanAdvert.endTime}"/>
                                    </p:column>

                                    <p:column headerText="状态">
                                        <h:outputText value="#{loanAdvertBean.translate(DictionaryCode.LOAN_ADVERT_STATUS, loanAdvert.status)}"/>
                                    </p:column>

                                </p:dataTable>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>
